<script lang="ts" setup>
import {ref,defineProps,watch, onMounted} from 'vue'

const props = defineProps({
  imgPath:{
    type:String,
    default:""
  }
})

let _imgPath = ref(props.imgPath)

watch(() => props.imgPath,(newPath) => {
  _imgPath.value = newPath
})


</script>

<template>
  <div class="banner" :style="{backgroundImage:`url(${_imgPath})`}">
    <img class="banner-img" :key="_imgPath" :src="_imgPath"  alt="">
  </div>
</template>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 55vh;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    backdrop-filter: blur(100px);
  }
}
</style>